
$(document).ready(function () {
    let screenWidth = window.innerWidth;
    $(window).resize(function () {
        screenWidth = document.body.clientWidth;
        initSize();
    })
    function initSize() {
        drawContent()
    }
    function drawContent(){
        if(screenWidth>0&&screenWidth<767){
            $('.header-logo').css('margin-left','10px')
            $('.container').css('width','300px')
            $('.container').css('margin-top','20px')
            $('.container').css('margin-bottom','0')
            $('.container-title').css("width","300px")
            $('.container-username').css("width","240px")
            $('.container-password').css("width","240px")
            $('.container-verification').css("width","120px")
            $('.container-code').css("width","110px")
            $('.container-verification').css('margin-left','30px')
            $('.container-signIn').css("width","240px")
            $('.footer').css('width','270px')
            $('.footer').css('line-height','30px')
            $('.footer').css('margin-top','0')
            $('.footer-company, .footer-copy').css('float','right')
        } else if(screenWidth>767&&screenWidth<1025){
            $('.header-logo').css("margin-left","20px")
            $('.container').css("width","360px")
            $('.container').css("margin-top","7px")
            $('.container').css("margin-bottom","67px")
            $('.container-title').css("width","360px")
            $('.container-username').css("width","280px")
            $('.container-password').css("width","280px")
            $('.container-verification').css("width","130px")
            $('.container-code').css("width","130px")
            $('.container-code').css("margin-left","20px")
            $('.container-signIn').css("width","280px")
            $('.footer').css('width','462.52px')
            $('.footer').css('line-height','80px')
            $('.footer').css('margin-top','-180px')
            $('.footer-company, .footer-copy').css('float','left')
            $('.footer-company, .footer-copy').css('float','left')
        }else if(screenWidth>1025&&screenWidth<1281){
            $('.header-logo').css('margin-left','50px')
            $('.container').css("width","360px")
            $('.container').css("margin-top","7px")
            $('.container').css("margin-bottom","67px")
            $('.container-title').css("width","360px")
            $('.container-username').css("width","280px")
            $('.container-password').css("width","280px")
            $('.container-verification').css("width","130px")
            $('.container-code').css("width","130px")
            $('.container-code').css("margin-left","20px")
            $('.container-signIn').css("width","280px")
            $('.footer').css('width','462.52px')
            $('.footer').css('line-height','80px')
            $('.footer').css('margin-top','-180px')
            $('.footer-company, .footer-copy').css('float','left')
        }else if(screenWidth>1281){
            $('.header-logo').css('margin-left','50px')
            $('.container').css("width","420px")
            $('.container').css("margin-top","120px")
            $('.container').css("margin-bottom","116px")
            $('.container-title').css("width","420px")
            $('.container-username').css("width","340px")
            $('.container-password').css("width","340px")
            $('.container-verification').css("width","165px")
            $('.container-code').css("width","165px")
            $('.container-code').css("margin-left","10px")
            $('.container-signIn').css("width","360px")
            $('.footer').css('width','462.52px')
            $('.footer').css('line-height','80px')
            $('.footer').css('margin-top','-180px')
            $('.footer-company, .footer-copy').css('float','left')
        }
    }
    drawContent()
});

